<template>
    <view class="home_view">
        <view class="container">
            <view 
                class="item" 
                @click="goPage('mz_docter')"
                :style="{
                    backgroundImage:'url(../../static/home/one_bg.png)',
                }">
                <image
                    src="@/static/home/one.png">
                </image>
                <view>门诊医生</view>
            </view>
            <view 
                class="item" 
                @click="goPage('mz_manage')"
                :style="{
                    backgroundImage:'url(../../static/home/two_bg.png)',
                }">
                <image
                    src="@/static/home/two.png">
                </image>
                <view>
                    门诊管理
                </view>
            </view>
            <view 
                class="item" 
                @click="goPage('yf_manage')"
                :style="{
                    backgroundImage:'url(../../static/home/three_bg.png)',
                }">
                <image
                    src="@/static/home/three.png">
                </image>
                <view>药房管理</view>
            </view>
            <view 
                class="item" 
                @click="goPage('mz_charge')"
                :style="{
                    backgroundImage:'url(../../static/home/four_bg.png)',
                }">
                <image
                    src="@/static/home/four.png">
                </image>
                <view>门诊收费</view>
            </view>
            <view 
                class="item" 
                @click="goPage('yk_manage')"
                :style="{
                    backgroundImage:'url(../../static/home/five_bg.png)',
                }">
                <image
                    src="@/static/home/five.png">
                </image>
                <view>药库管理</view>
            </view>
            <view 
                class="item" 
                @click="goPage('bl_history')"
                :style="{
                    backgroundImage:'url(../../static/home/six_bg.png)',
                }">
                <image
                    src="@/static/home/six.png">
                </image>
                <view>历史病历</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        goPage(page){ //页面跳转
            uni.navigateTo({
                url: `/pages/${page}/index`,
            });
        },    
    }
}
</script>

<style scoped lang="scss">
.home_view{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    >.container {
        padding: 30px;
        box-sizing: border-box;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:30px ;
        justify-content: center;
        align-items: center;
        >.item{
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
            box-sizing: border-box;
            display: grid;
            grid-template-columns: 1fr;
            grid-gap:15px ;
            justify-items: center;
            align-items: center;
            text-align: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center bottom;
            >image{
                width: 100rpx;
                height: 100rpx;
                object-fit: cover;
            }
        }
    }
}
</style>
